import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,pageSize} from '../../utils/common'

import './mall.less'
import './custom_list.less'

// 商城-礼品定制-列表
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class CustomList extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    customizedCategoryId: null,
    pageIndex:1,
    pageSize,
    totalCount:0,
    items:[],
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '礼品定制中心'})
    let customizedCategoryId = parseInt(this.$router.params.id)
    if (!customizedCategoryId) { getRuntime().navigateBack() }
    this.setState({
      customizedCategoryId
    },() => {
       this.getCustomizedInfo()
    })
  }

  getCustomizedInfo() {
    let { PointMallStore } = this.props.stores
    let { customizedCategoryId,pageIndex,pageSize } = this.state
    PointMallStore.getCustomizedInfo({
      formCustomizedCategoryId: customizedCategoryId,
      pageIndex,
      pageSize,
      callback: res => {
        let { totalCount, items } = toJS(res)
        this.setState({
          totalCount,
          items,
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  render() {
    let { items } = this.state
    return (
      <View className='mall-custom-index'>
        <View className='list-14'>
          {items.length>0&&
            items.map(item => {
              return(
                <View className='list-14-item' onClick={this.handelRouter.bind(this,`/pages/mall/custom_detail?id=${item.id}&type=custom`)}>
                  <Image className='item-img' src={item.picture} />
                  <View className='info'>
                    <View className='title list-title'>
                      {item.name}
                    </View>
                    <View className='price list-price'><Text className='small list-small'>￥</Text>{item.price}</View>
                  </View>
                </View>
              )
            })
          }
          {items.length<=0&&
          <View className='page-none-info'>暂时没有相关产品信息~</View>
          }
        </View>
      </View>
    )
  }
}

export default CustomList
